<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>StarScream： A New Presentation Tool</title>
<link rel="stylesheet" type="text/css" href="handout.css" />
<link rel="stylesheet" type="text/css" href="custom.css" />
<body>
<div id="info">
    <div id="title">StarScream： A New Presentation Tool</div>
    <div id="author">Feihong Hsu (徐飞鸿)</div>
    <div id="venue">Chicago Python Users Group</div>
    <div id="location">Chicago, USA (芝加哥，美国)</div>
    <div id="date">Month Day Year</div>
</div>
<div class="section">
<h1>What Is StarScream?</h1>
<p>StarScream lets you write your entire presentation using <a class="reference" href="http://docutils.sourceforge.net/rst.html">reStructuredText</a>.</p>
<p>Presentations made with StarScream are web pages that can be displayed in any modern web browser.</p>
<div class="notes">
<p>Because you write your entire presentation in plain text, you can focus on your content, without worrying too much about the visual presentation.</p>
<p>One big advantage of StarScream is that if your laptop dies before your talk, you can borrow somebody else's laptop and the presentation will still look the same. Sweet!</p>
<p>StarScream was somewhat inspired by <a class="reference" href="http://meyerweb.com/eric/tools/s5/">S5</a> (Simple Standards-Based Slide Show System).</p>
</div>
</div>
<div class="section">
<h1>Features</h1>
<ul class="simple">
<li>Generates slides AND handouts</li>
<li>Dynamic text zoom</li>
<li>Syntax highlighting for code blocks</li>
<li>Customizable through CSS</li>
<li>Not fugly</li>
</ul>
<div class="notes">
<p>Slides and handouts are generated as two separate files.</p>
<p>The slides are generated into an HTML file called <tt class="docutils literal"><span class="pre">slides.html</span></tt>. The actual contents of every slide are put into a separate file called <tt class="docutils literal"><span class="pre">slides.js</span></tt>.</p>
<p>Handouts are generated as a single HTML file called <tt class="docutils literal"><span class="pre">handout.html</span></tt>.</p>
</div>
</div>
<div class="section">
<h1>What Does the Name Mean?</h1>
<img alt="media/Starscreamg1.jpg" src="media/Starscreamg1.jpg"/>
<div class="notes">
<p><a class="reference" href="http://transformers.wikia.com/wiki/Starscream_%28G1%29">Starscream</a> is my favorite character from the <a class="reference" href="http://transformers.wikia.com/wiki/Transformers">Transformers</a> TV show. He was voiced by the inimitable <a class="reference" href="http://transformers.wikia.com/wiki/Chris_Latta">Chris Latta</a>, who also provided the voice for <a class="reference" href="http://gijoe.wikia.com/wiki/Cobra_Commander">Cobra Commander</a> from <a class="reference" href="http://gijoe.wikia.com/wiki/G.I._Joe:_A_Real_American_Hero">G.I. Joe</a>. His were the original voices for Mr Burns and Moe on <em>The Simpsons</em>.</p>
<p>Image courtesy of <a class="reference" href="http://transformers.wikia.com/wiki/Main_Page">Teletraan I: The Transformers Wiki</a>.</p>
</div>
</div>
<div class="section">
<h1>A Tour of StarScream</h1>
<ul class="simple">
<li>Key controls</li>
<li><tt class="docutils literal"><span class="pre">info</span></tt>, <tt class="docutils literal"><span class="pre">code</span></tt>, <tt class="docutils literal"><span class="pre">cssfile</span></tt></li>
<li>Lists, tables, images</li>
<li>Raw HTML</li>
<li>Command line usage</li>
</ul>
</div>
<div class="section">
<h1>Key Controls</h1>
<p>The slide show is completely controlled through key presses:</p>
<table border="1" class="key-control-table docutils">
<colgroup>
<col width="20%"/>
<col width="80%"/>
</colgroup>
<tbody valign="top">
<tr><td><tt class="docutils literal"><span class="pre">j</span></tt></td>
<td>next slide</td>
</tr>
<tr><td><tt class="docutils literal"><span class="pre">k</span></tt></td>
<td>previous slide</td>
</tr>
<tr><td><tt class="docutils literal"><span class="pre">-</span></tt></td>
<td>decrease text size</td>
</tr>
<tr><td><tt class="docutils literal"><span class="pre">=</span></tt></td>
<td>increase text size</td>
</tr>
</tbody>
</table>
<div class="notes">
<p>The <tt class="docutils literal"><span class="pre">+</span></tt> key can also be used to increase text size (but most laptops don't have a standalone <tt class="docutils literal"><span class="pre">+</span></tt> key).</p>
<p>Starscream's control system is designed to be useful even when you have to speak while holding a microphone and have only one free hand.</p>
<p>Why doesn't StarScream use the arrow keys or page(up|down) keys? Because in StarScream, those keys are used for scrolling. Slides in StarScream are not limited to the size of your display.</p>
</div>
</div>
<div class="section">
<h1>The info Directive</h1>
<div class="highlight"><pre>.. info::

    author = Feihong Hsu
    venue = Chicago Python Users Group
    location = Chicago, USA
    date = April 10, 2007
</pre></div>
<div class="notes">
<p>The <tt class="docutils literal"><span class="pre">info</span></tt> directive is a way of specifying the metadata for a presentation. The information you provide to this directive is used to generate the title slide.</p>
</div>
</div>
<div class="section">
<h1>The code Directive</h1>
<div class="highlight"><pre>.. code:: xml

    &lt;StackPanel Margin="5"&gt;
        &lt;Label Margin="5"&gt;This is a label&lt;/Label&gt;

        &lt;ListBox Name="list" Margin="5"/&gt;

        &lt;ComboBox Name="combo" Margin="5" /&gt;

        &lt;CheckBox Name="check" Margin="5"&gt;Check box&lt;/CheckBox&gt;

        &lt;StackPanel Margin="5" Orientation="Horizontal"&gt;
            &lt;RadioButton Margin="5"&gt;X-Ray&lt;/RadioButton&gt;
            &lt;RadioButton Margin="5"&gt;Yoyo&lt;/RadioButton&gt;
            &lt;RadioButton Margin="5" IsChecked="true"&gt;Zebra&lt;/RadioButton&gt;
        &lt;/StackPanel&gt;
    &lt;/StackPanel&gt;
</pre></div>
<div class="notes">
<p>In addition to common programming languages, the <tt class="docutils literal"><span class="pre">code</span></tt> directive also supports various markup languages. See <a class="reference" href="http://pygments.org/languages/">here</a> for the full list of supported languages.</p>
</div>
</div>
<div class="section">
<h1>The code Directive</h1>
<div class="highlight"><pre><span class="nt">&lt;StackPanel</span> <span class="na">Margin=</span><span class="s">"5"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;Label</span> <span class="na">Margin=</span><span class="s">"5"</span><span class="nt">&gt;</span>This is a label<span class="nt">&lt;/Label&gt;</span>

    <span class="nt">&lt;ListBox</span> <span class="na">Name=</span><span class="s">"list"</span> <span class="na">Margin=</span><span class="s">"5"</span><span class="nt">/&gt;</span>

    <span class="nt">&lt;ComboBox</span> <span class="na">Name=</span><span class="s">"combo"</span> <span class="na">Margin=</span><span class="s">"5"</span> <span class="nt">/&gt;</span>

    <span class="nt">&lt;CheckBox</span> <span class="na">Name=</span><span class="s">"check"</span> <span class="na">Margin=</span><span class="s">"5"</span><span class="nt">&gt;</span>Check box<span class="nt">&lt;/CheckBox&gt;</span>

    <span class="nt">&lt;StackPanel</span> <span class="na">Margin=</span><span class="s">"5"</span> <span class="na">Orientation=</span><span class="s">"Horizontal"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;RadioButton</span> <span class="na">Margin=</span><span class="s">"5"</span><span class="nt">&gt;</span>X-Ray<span class="nt">&lt;/RadioButton&gt;</span>
        <span class="nt">&lt;RadioButton</span> <span class="na">Margin=</span><span class="s">"5"</span><span class="nt">&gt;</span>Yoyo<span class="nt">&lt;/RadioButton&gt;</span>
        <span class="nt">&lt;RadioButton</span> <span class="na">Margin=</span><span class="s">"5"</span> <span class="na">IsChecked=</span><span class="s">"true"</span><span class="nt">&gt;</span>Zebra<span class="nt">&lt;/RadioButton&gt;</span>
    <span class="nt">&lt;/StackPanel&gt;</span>
<span class="nt">&lt;/StackPanel&gt;</span>
</pre></div>
<div class="notes">
<p>This is what we see when the markup from the previous slide is applied.</p>
</div>
</div>
<div class="section">
<h1>The code Directive</h1>
<div class="highlight"><pre>.. code:: html
    :file: code/keypress.html
</pre></div>
<div class="notes">
<p>You can directly reference files. The <tt class="docutils literal"><span class="pre">code</span></tt> directive will insert the contents of the file into the presentation.</p>
</div>
</div>
<div class="section">
<h1>The code Directive</h1>
<div class="highlight"><pre><span class="cp">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</span>
<span class="nt">&lt;html</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/1999/xhtml"</span> <span class="na">xml:lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;title&gt;</span>keypress demo<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"jquery.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
    <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">keypress</span><span class="p">(</span><span class="k">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">which</span> <span class="o">==</span> <span class="mi">32</span> <span class="o">||</span> <span class="p">(</span><span class="mi">65</span> <span class="o">&lt;=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">which</span> <span class="o">&amp;&amp;</span> <span class="nx">e</span><span class="p">.</span><span class="nx">which</span> <span class="o">&lt;=</span> <span class="mi">65</span> <span class="o">+</span> <span class="mi">25</span><span class="p">)</span>
                          <span class="o">||</span> <span class="p">(</span><span class="mi">97</span> <span class="o">&lt;=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">which</span> <span class="o">&amp;&amp;</span> <span class="nx">e</span><span class="p">.</span><span class="nx">which</span> <span class="o">&lt;=</span> <span class="mi">97</span> <span class="o">+</span> <span class="mi">25</span><span class="p">))</span> <span class="p">{</span>
        <span class="k">var</span> <span class="nx">c</span> <span class="o">=</span> <span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">which</span><span class="p">);</span>
        <span class="nx">$</span><span class="p">(</span><span class="s2">"p"</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">"&lt;span/&gt;"</span><span class="p">))</span>
              <span class="p">.</span><span class="nx">children</span><span class="p">(</span><span class="s2">":last"</span><span class="p">)</span>
              <span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createTextNode</span><span class="p">(</span><span class="nx">c</span><span class="p">));</span>
      <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">which</span> <span class="o">==</span> <span class="mi">8</span><span class="p">)</span> <span class="p">{</span>
        <span class="c">// backspace in IE only be on keydown</span>
        <span class="nx">$</span><span class="p">(</span><span class="s2">"p"</span><span class="p">).</span><span class="nx">children</span><span class="p">(</span><span class="s2">":last"</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>
      <span class="p">}</span>
      <span class="nx">$</span><span class="p">(</span><span class="s2">"div"</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">which</span><span class="p">);</span>
    <span class="p">});</span>
<span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;/head&gt;</span>

<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;p&gt;&lt;/p&gt;</span>
    
    <span class="nt">&lt;div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>

<span class="nt">&lt;/html&gt;</span>
</pre></div>
</div>
<div class="section">
<h1>The cssfile Directive</h1>
<div class="highlight"><pre><span class="p">..</span> <span class="ow">cssfile</span><span class="p">::</span> <span class="k">custom.css</span>
</pre></div>
<div class="notes">
<p>You specify links to your own CSS files using the <tt class="docutils literal"><span class="pre">cssfile</span></tt> directive. You will often use this directive in conjunction with <a class="reference" href="http://docutils.sourceforge.net/rst.html">reStructuredText</a>'s built-in <tt class="docutils literal"><span class="pre">class</span></tt> directive (you'll see an example of this later on).</p>
</div>
</div>
<div class="section">
<h1>The cssfile Directive</h1>
<div class="highlight"><pre><span class="nt">table</span><span class="nc">.key-control-table</span> <span class="p">{</span> <span class="k">border-collapse</span><span class="o">:</span> <span class="k">collapse</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">table</span><span class="nc">.key-control-table</span> <span class="nt">td</span> <span class="p">{</span> <span class="k">padding</span><span class="o">:</span> <span class="m">15px</span><span class="p">;</span> <span class="p">}</span>

<span class="nt">table</span><span class="nc">.example-table</span> <span class="p">{</span> <span class="k">border-collapse</span><span class="o">:</span> <span class="k">collapse</span><span class="p">;</span> <span class="k">background-color</span><span class="o">:</span> <span class="nb">white</span><span class="p">;</span> <span class="p">}</span>
<span class="nt">table</span><span class="nc">.example-table</span> <span class="nt">th</span> <span class="p">{</span>
    <span class="k">background-color</span><span class="o">:</span> <span class="nb">blue</span><span class="p">;</span>
    <span class="k">border</span><span class="o">:</span> <span class="m">4px</span> <span class="k">solid</span> <span class="nb">black</span><span class="p">;</span>
    <span class="k">color</span><span class="o">:</span> <span class="nb">white</span><span class="p">;</span>
    <span class="p">}</span>
<span class="nt">table</span><span class="nc">.example-table</span> <span class="nt">td</span> <span class="p">{</span> <span class="k">padding</span><span class="o">:</span> <span class="m">0</span> <span class="m">5px</span> <span class="m">0</span> <span class="m">5px</span><span class="p">;</span> <span class="p">}</span>
</pre></div>
<div class="notes">
<p>These are the contents of the <tt class="docutils literal"><span class="pre">custom.css</span></tt> file for this presentation.</p>
</div>
</div>
<div class="section">
<h1>Lists</h1>
<div class="highlight"><pre><span class="m">-</span> This is my first point
<span class="m">-</span> This is my second point

  <span class="m">#.</span> This is point A
  <span class="m">#.</span> This is point B
  <span class="m">#.</span> This is point C

<span class="m">-</span> This is my third point
</pre></div>
</div>
<div class="section">
<h1>Lists</h1>
<ul class="simple">
<li>This is my first point</li>
<li>This is my second point<ol class="arabic">
<li>This is point A</li>
<li>This is point B</li>
<li>This is point C</li>
</ol>
</li>
<li>This is my third point</li>
</ul>
</div>
<div class="section">
<h1>Tables</h1>
<div class="highlight"><pre>.. class:: example-table

+------------------------+------------+----------+----------+
| Header row, column 1   | Header 2   | Header 3 | Header 4 |
| (header rows optional) |            |          |          |
+========================+============+==========+==========+
| body row 1, column 1   | column 2   | column 3 | column 4 |
+------------------------+------------+----------+----------+
| body row 2             | Cells may span columns.          |
+------------------------+------------+---------------------+
| body row 3             | Cells may  | - Table cells       |
+------------------------+ span rows. | - contain           |
| body row 4             |            | - body elements.    |
+------------------------+------------+---------------------+
</pre></div>
<div class="notes">
<p>Note how we explicitly specify the class of the table using the <tt class="docutils literal"><span class="pre">class</span></tt> directive. Now we can do custom styling on the table.</p>
</div>
</div>
<div class="section">
<h1>Tables</h1>
<table border="1" class="example-table docutils">
<colgroup>
<col width="43%"/>
<col width="21%"/>
<col width="18%"/>
<col width="18%"/>
</colgroup>
<thead valign="bottom">
<tr><th class="head">Header row, column 1
(header rows optional)</th>
<th class="head">Header 2</th>
<th class="head">Header 3</th>
<th class="head">Header 4</th>
</tr>
</thead>
<tbody valign="top">
<tr><td>body row 1, column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
</tr>
<tr><td>body row 2</td>
<td colspan="3">Cells may span columns.</td>
</tr>
<tr><td>body row 3</td>
<td rowspan="2">Cells may
span rows.</td>
<td colspan="2" rowspan="2"><ul class="first last simple">
<li>Table cells</li>
<li>contain</li>
<li>body elements.</li>
</ul>
</td>
</tr>
<tr><td>body row 4</td>
</tr>
</tbody>
</table>
</div>
<div class="section">
<h1>Images</h1>
<div class="highlight"><pre>.. image:: media/mickey_cactus.jpg

.. image:: media/real_estate_bargain.jpg
</pre></div>
</div>
<div class="section">
<h1>Images</h1>
<img alt="media/mickey_cactus.jpg" src="media/mickey_cactus.jpg"/>
<img alt="media/real_estate_bargain.jpg" src="media/real_estate_bargain.jpg"/>
<div class="notes">
<p><a class="reference" href="http://www.flickr.com/photos/cogdog/2365543238/">Mickey Cactus</a> and <a class="reference" href="http://www.flickr.com/photos/cogdog/2364709847/">Who Says There Are No Real Estate Bargains</a> by <a class="reference" href="http://www.flickr.com/photos/cogdog/">cogdogblog</a>.</p>
</div>
</div>
<div class="section">
<h1>Raw HTML</h1>
<div class="highlight"><pre>.. raw:: html

    &lt;p style="border: 5px dashed #222; padding: 20px;
              background-color: #fff; font-weight: bold"&gt;
        &lt;span style="color:#0039b6; font-size:2em"&gt;&#20320;&lt;/span&gt;
        &lt;span style="color:#c41200; font-size:2.5em"&gt;&#22909;&lt;/span&gt;
        &lt;span style="color:#f3c518; font-size:3em"&gt;&#33437;&lt;/span&gt;
        &lt;span style="color:#0039b6; font-size:3.5em"&gt;&#21152;&lt;/span&gt;
        &lt;span style="color:#30a72f; font-size:4em"&gt;&#21733;&lt;/span&gt;
    &lt;/p&gt;
</pre></div>
<div class="notes">
<p>You can always resort to raw HTML if that's what you need. Note that this option allows you to use the <tt class="docutils literal"><span class="pre">IFRAME</span></tt> tag to display the contents of other web pages.</p>
</div>
</div>
<div class="section">
<h1>Raw HTML</h1>
<p style="border: 5px dashed #222; padding: 20px;           background-color: #fff; font-weight: bold">
    <span style="color:#0039b6; font-size:2em">&#20320;</span>
    <span style="color:#c41200; font-size:2.5em">&#22909;</span>
    <span style="color:#f3c518; font-size:3em">&#33437;</span>
    <span style="color:#0039b6; font-size:3.5em">&#21152;</span>
    <span style="color:#30a72f; font-size:4em">&#21733;</span>
</p></div>
<div class="section">
<h1>Command Line Usage</h1>
<div class="highlight"><pre>Usage: starscream.py action
actions:
    all
      Generate files for both slides and handout

    slides
      Generate the files slides.html and slides.js

    handout
      Generate the handout.html file

    project
      Create the directory structure and initial files for a new
      presentation project
</pre></div>
</div>
<div class="section">
<h1>Look Ma, It's Unicode!</h1>
<ul class="simple">
<li>Python &#26159;&#26368;&#22909;&#30340;&#32232;&#31243;&#35486;&#35328;&#65281;</li>
<li>Pythonas yra &#382;aviausia &#353;neka</li>
<li>&#1055;&#1080;&#1090;&#1086;&#1085; &#1077; &#1085;&#1072;&#1081;-&#1076;&#1086;&#1073;&#1088;&#1080;&#1103; &#1087;&#1088;&#1086;&#1075;&#1088;&#1072;&#1084;&#1077;&#1085; &#1077;&#1079;&#1080;&#1082;!</li>
<li>A&#353; m&#279;gstu &#353;okolad&#261;</li>
<li>&#54028;&#51060;&#50028;&#51008; &#52572;&#44256;&#51032; &#54532;&#47196;&#44536;&#47000;&#48141; &#50616;&#50612;&#51060;&#45796;!</li>
<li>&#1055;&#1080;&#1090;&#1086;&#1085; - &#1083;&#1091;&#1095;&#1096;&#1080;&#1081; &#1103;&#1079;&#1099;&#1082;</li>
<li>&#1087;&#1088;&#1086;&#1075;&#1088;&#1072;&#1084;&#1084;&#1080;&#1088;&#1086;&#1074;&#1072;&#1085;&#1080;&#1103;!</li>
</ul>
<div class="notes">
<p>These strings were lifted from the <a class="reference" href="http://wxpython.org">wxPython Demo</a>. Go check it out if you want to know what they all mean.</p>
</div>
</div>
<div class="section">
<h1>Module Dependencies</h1>
<ul class="simple">
<li>docutils</li>
<li>lxml</li>
<li>pygments</li>
<li>simplejson</li>
<li>setuptools</li>
</ul>
<div class="notes">
<p><a class="reference" href="http://docutils.sourceforge.net">docutils</a> converts the content (in <a class="reference" href="http://docutils.sourceforge.net/rst.html">reStructuredText</a>) to HTML.</p>
<p><a class="reference" href="http://codespeak.net/lxml">lxml</a> is used to post-process the DOM of the HTML generated by <a class="reference" href="http://docutils.sourceforge.net">docutils</a>.</p>
<p><a class="reference" href="http://pygments.org">pygments</a> provides syntax highlighting for Python source code (as well as C#, Java, JavaScript, XML, HTML, ReST, and <a class="reference" href="http://pygments.org/languages/">many other languages</a>.</p>
<p><a class="reference" href="http://simplejson.googlecode.com/svn/tags/simplejson-1.8.1/docs/index.html">simplejson</a> is used to serialize the HTML markup to JSON.</p>
<p>We use the <tt class="docutils literal"><span class="pre">pkg_resources</span></tt> module that comes with <a class="reference" href="http://peak.telecommunity.com/DevCenter/setuptools">setuptools</a> to access files bundled within our module.</p>
</div>
</div>
<div class="section">
<h1>JavaScript Dependencies</h1>
<ul class="simple">
<li>jQuery</li>
<li>jQuery plugins:<ul>
<li>jQuery Gradient</li>
<li>jQuery Dimensions</li>
</ul>
</li>
</ul>
<div class="notes">
<p><a class="reference" href="http://jquery.com">jQuery</a> is used to handle key presses. Of course we can do this without a JavaScript library, but cross-browser incompatibilities would make it a huge pain.</p>
<p><a class="reference" href="http://plugins.jquery.com/project/gradient">jQuery Gradient</a> allows us to use dynamic gradients in the slide headers.</p>
<p><a class="reference" href="http://plugins.jquery.com/project/dimensions">jQuery Dimensions</a> is a dependency of the <a class="reference" href="http://plugins.jquery.com/project/gradient">jQuery Gradient</a> plugin.</p>
<p>All JavaScript dependencies are packaged along with StarScream.</p>
</div>
</div>
<div class="section">
<h1>Limitations</h1>
<ul class="simple">
<li>Display issues in Internet Explorer (surprise, surprise)<ul>
<li>Bullet points are rendered very small</li>
<li>Gradients do not work</li>
</ul>
</li>
<li>No markup allowed in slide headers</li>
</ul>
</div>
<div class="section">
<h1>Similar Projects</h1>
<p><tt class="docutils literal"><span class="pre">rst2s5.py</span></tt> is a frontend script that ships with <tt class="docutils literal"><span class="pre">docutils</span></tt>.</p>
<div class="notes">
<p><a class="reference" href="http://docutils.sourceforge.net/docs/user/slide-shows.html">rst2s5.py</a> accepts a <a class="reference" href="http://docutils.sourceforge.net/rst.html">reStructuredText</a> document, and outputs an <a class="reference" href="http://meyerweb.com/eric/tools/s5/">S5</a> presentation (an HTML file).</p>
</div>
</div>
<div class="section">
<h1>Future Work</h1>
<ul class="simple">
<li>The CSS could use some tweaking</li>
<li>Better error handling</li>
<li>Plugin system<ul>
<li>Better handling of images</li>
<li>Integrated charts and plots</li>
</ul>
</li>
</ul>
<div class="notes">
<p>The CSS isn't perfect (I'm not a designer), but after you create a presentation project you can edit the <tt class="docutils literal"><span class="pre">handout.css</span></tt> and <tt class="docutils literal"><span class="pre">slide.css</span></tt> files yourself.</p>
<p>I think the plugin system (not implemented yet) will be based on <a class="reference" href="http://peak.telecommunity.com/DevCenter/PythonEggs">Python Eggs</a>.</p>
<p>There are many possibilities for improving image handing:</p>
<ul class="simple">
<li>Making an image be the background</li>
<li>Dynamic rescaling to fill up the available screen space</li>
<li>Wrapping around text</li>
<li>Arbitrary zooming and panning</li>
<li>Other crap that I haven't even thought of yet</li>
</ul>
<p>Because I don't make heavy use of images in my presentations, I don't feel comfortable putting any of these in the core distribution. I think it's best to leave this functionality up to plugins or, in the case of Firefox, <a class="reference" href="http://imagezoom.yellowgorilla.net/">browser extensions</a>.</p>
<p>Charts can be possibly be implemented by using <a class="reference" href="http://matplotlib.sourceforge.net/">matplotlib</a> to generate <a class="reference" href="http://en.wikipedia.org/wiki/Svg">SVG</a> files. Since IE does not have <a class="reference" href="http://en.wikipedia.org/wiki/Svg#Native_support">native support for SVG</a>, we would need to use a Flash wrapper to maintain cross-browser compatibility (<a class="reference" href="http://en.wikipedia.org/wiki/Adobe_Flex">Adobe Flex</a> <a class="reference" href="http://www.adobe.com/devnet/flex/quickstart/embedding_assets/">supports embedding</a> of <a class="reference" href="http://en.wikipedia.org/wiki/Svg">SVG</a>).</p>
<p>Or, perhaps it makes more sense to just integrate support for <a class="reference" href="http://www.liquidx.net/plotkit/">PlotKit</a> and/or <a class="reference" href="http://code.google.com/p/flot/">flot</a>. (I'm pretty sure this is not the way to go, but it's worth considering.)</p>
</div>
</div>
<div class="section">
<h1>Don't Wait! Get It Now!</h1>
<p><a class="reference" href="http://starscream-slideshow.googlecode.com/">http://starscream-slideshow.googlecode.com/</a></p>
<p><a class="reference" href="http://pypi.python.org/pypi/StarScream">http://pypi.python.org/pypi/StarScream</a></p>
</div>

</body>
</html>
